<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" rel="stylesheet" href="css/style.css" />
    <!--[if IE 6]>
    <script src="js/iepng.js" type="text/javascript"></script>
        <script type="text/javascript">
           EvPNG.fix('div, ul, img, li, input, a'); 
        </script>
    <![endif]-->

    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/menu.js"></script>

    <script type="text/javascript" src="js/select.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/md5.js"></script>

    <title>尤洪</title>
</head>
<body>
<!--Begin Header Begin-->
<div id="box">
    <div class="soubg">
        <div class="sou">
            <!--Begin 所在收货地区 Begin-->
            <span class="s_city_b">
        	<span class="fl">送货至：</span>
            <span class="s_city">
            	<span>四川</span>
                <div class="s_city_bg">
                	<div class="s_city_t"></div>
                    <div class="s_city_c">
                    	<h2>请选择所在的收货地区</h2>
                        <table border="0" class="c_tab" style="width:235px; margin-top:10px;" cellspacing="0"
                               cellpadding="0">
                          <tr>
                            <th>A</th>
                            <td class="c_h"><span>安徽</span><span>澳门</span></td>
                          </tr>
                          <tr>
                            <th>B</th>
                            <td class="c_h"><span>北京</span></td>
                          </tr>
                          <tr>
                            <th>C</th>
                            <td class="c_h"><span>重庆</span></td>
                          </tr>
                          <tr>
                            <th>F</th>
                            <td class="c_h"><span>福建</span></td>
                          </tr>
                          <tr>
                            <th>G</th>
                            <td class="c_h"><span>广东</span><span>广西</span><span>贵州</span><span>甘肃</span></td>
                          </tr>
                          <tr>
                            <th>H</th>
                            <td class="c_h"><span>河北</span><span>河南</span><span>黑龙江</span><span>海南</span><span>湖北</span><span>湖南</span></td>
                          </tr>
                          <tr>
                            <th>J</th>
                            <td class="c_h"><span>江苏</span><span>吉林</span><span>江西</span></td>
                          </tr>
                          <tr>
                            <th>L</th>
                            <td class="c_h"><span>辽宁</span></td>
                          </tr>
                          <tr>
                            <th>N</th>
                            <td class="c_h"><span>内蒙古</span><span>宁夏</span></td>
                          </tr>
                          <tr>
                            <th>Q</th>
                            <td class="c_h"><span>青海</span></td>
                          </tr>
                          <tr>
                            <th>S</th>
                            <td class="c_h"><span>上海</span><span>山东</span><span>山西</span><span class="c_check">四川</span><span>陕西</span></td>
                          </tr>
                          <tr>
                            <th>T</th>
                            <td class="c_h"><span>台湾</span><span>天津</span></td>
                          </tr>
                          <tr>
                            <th>X</th>
                            <td class="c_h"><span>西藏</span><span>香港</span><span>新疆</span></td>
                          </tr>
                          <tr>
                            <th>Y</th>
                            <td class="c_h"><span>云南</span></td>
                          </tr>
                          <tr>
                            <th>Z</th>
                            <td class="c_h"><span>浙江</span></td>
                          </tr>
                        </table>
                    </div>
                </div>
            </span>
        </span>
            <!--End 所在收货地区 End-->
            <span class="fr">
        	<span class="fl">你好，<a href="Login.html">{{loginFlag}}</a>&nbsp; <button v-if="exitFlag"
                                                                                     @click="exit">退出</button>  <a
                    href="Regist.html" style="color:#ff4e00;">免费注册</a>&nbsp;|&nbsp;<a href="#">我的订单</a>&nbsp;|</span>
        	<span class="ss">
            	<div class="ss_list">
                	<a href="#">收藏夹</a>
                    <div class="ss_list_bg">
                    	<div class="s_city_t"></div>
                        <div class="ss_list_c">
                        	<ul>
                            	<li><a href="#">我的收藏夹</a></li>
                                <li><a href="#">我的收藏夹</a></li>
                            </ul>
                        </div>
                    </div>     
                </div>
                <div class="ss_list">
                	<a href="#">客户服务</a>
                    <div class="ss_list_bg">
                    	<div class="s_city_t"></div>
                        <div class="ss_list_c">
                        	<ul>
                            	<li><a href="#">客户服务</a></li>
                                <li><a href="#">客户服务</a></li>
                                <li><a href="#">客户服务</a></li>
                            </ul>
                        </div>
                    </div>    
                </div>
                <div class="ss_list">
                	<a href="#">网站导航</a>
                    <div class="ss_list_bg">
                    	<div class="s_city_t"></div>
                        <div class="ss_list_c">
                        	<ul>
                            	<li><a href="#">网站导航</a></li>
                                <li><a href="#">网站导航</a></li>
                            </ul>
                        </div>
                    </div>    
                </div>
            </span>
            <span class="fl">|&nbsp;关注我们：</span>
            <span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span>
            <span class="fr">|&nbsp;<a href="#">手机版&nbsp;<img src="images/s_tel.png" align="absmiddle"/></a></span>
        </span>
        </div>
    </div>
    <div class="m_top_bg">
        <div class="top">
            <div class="m_logo"><a href="Index.html"><img src="images/logo1.png"/></a></div>

        </div>
        <!--End Header End-->
        <div class="i_bg bg_color">
            <!--Begin 用户中心 Begin -->
            <div class="m_content">
                <div class="m_left">
                    <div class="left_n">管理中心</div>
                    <div class="left_m">
                        <div class="left_m_t t_bg1">订单中心</div>
                        <ul>
                            <li><a href="Member_Order.html" class="now">我的订单</a></li>
                            <li><a href="Member_Address.html">收货地址</a></li>
                        </ul>
                    </div>
                    <div class="left_m">
                        <div class="left_m_t t_bg2">会员中心</div>
                        <ul>
                            <li><a href="Member_User.html">用户信息</a></li>
                            <li><a href="Member_Collect.html">我的收藏</a></li>
                            <li v-show="isFlag"><a href="./showUserList.html">用户列表</a></li>
                            <li v-show="isFlag"><a href="Member_User_typeList.html">类型列表</a></li>
                            <li v-show="isFlag"><a href="./goodsList.html">商品列表</a></li>
                        </ul>
                    </div>
                </div>
                <div class="m_right">
                    <p></p>
                    <div class="mem_tit">我的订单 <input type="text" v-model="s" /> <input type="button" value="搜索" @click="showOrders(1)"/></div>
                    <table border="0" class="order_tab" style="width:930px; text-align:center; margin-bottom:30px;"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="20%">订单号</td>
                            <td width="25%">下单时间</td>
                            <td width="15%">订单总金额</td>
                            <td width="25%">订单状态</td>
                            <td width="15%">操作</td>
                        </tr>
                        <tr v-for="(order,i) in userOrders">
                            <td><font color="#ff4e00"><a :href=`Member_OrderDetails.html?oid=${order.id}`>{{order.serialNumber}}</a></font></td>
                            <td>{{order.createTime}}</td>
                            <td>￥{{order.cost}}</td>
                            <td v-if="order.isPay==0">未确认，未付款，未发货</td>
                            <td v-if="order.isPay==1">已确认，已付款，已发货</td>
                            <td v-if="order.isPay==0" >取消订单</td>
                            <td v-if="order.isPay==1"><font color="#ff4e00">已确认</font></td>
                        </tr>
                       <!-- <tr>
                            <td><font color="#ff4e00">2015092823056</font></td>
                            <td>2015-09-26 16:45:20</td>
                            <td>￥456.00</td>
                            <td>已确认，已付款，已发货</td>
                            <td><font color="#ff4e00">已确认</font></td>
                        </tr>-->

                    </table>
                    <span>共{{count}}条</span>
                    <div class="pages">
                        <a href="javascript:void(0);" class="p_pre" @click="onePage()">首页</a>
                        <a href="javascript:void(0);" class="p_pre" @click="shangPage()">上一页</a>
                        <a href="javascript:void(0);" class="p_pre" >第{{pageNo}}页</a>
                        <a href="javascript:void(0);" class="p_pre" >共{{pageCount}}页</a>
                        <a href="javascript:void(0);" class="p_pre" @click="xiaPage()">下一页</a>
                        <a href="javascript:void(0);" class="p_pre" @click="showLast()">末页</a>
                    </div>

                </div>
            </div>
            <!--End 用户中心 End-->
            <!--Begin Footer Begin -->
            <div class="b_btm_bg b_btm_c">
                <div class="b_btm">
                    <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="72"><img src="images/b1.png" width="62" height="62"/></td>
                            <td><h2>正品保障</h2>正品行货 放心购买</td>
                        </tr>
                    </table>
                    <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="72"><img src="images/b2.png" width="62" height="62"/></td>
                            <td><h2>满38包邮</h2>满38包邮 免运费</td>
                        </tr>
                    </table>
                    <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="72"><img src="images/b3.png" width="62" height="62"/></td>
                            <td><h2>天天低价</h2>天天低价 畅选无忧</td>
                        </tr>
                    </table>
                    <table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;"
                           cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="72"><img src="images/b4.png" width="62" height="62"/></td>
                            <td><h2>准时送达</h2>收货时间由你做主</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="b_nav">
                <dl>
                    <dt><a href="#">新手上路</a></dt>
                    <dd><a href="#">售后流程</a></dd>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">订购方式</a></dd>
                    <dd><a href="#">隐私声明</a></dd>
                    <dd><a href="#">推荐分享说明</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">配送与支付</a></dt>
                    <dd><a href="#">货到付款区域</a></dd>
                    <dd><a href="#">配送支付查询</a></dd>
                    <dd><a href="#">支付方式说明</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">会员中心</a></dt>
                    <dd><a href="#">资金管理</a></dd>
                    <dd><a href="#">我的收藏</a></dd>
                    <dd><a href="#">我的订单</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">服务保证</a></dt>
                    <dd><a href="#">退换货原则</a></dd>
                    <dd><a href="#">售后服务保证</a></dd>
                    <dd><a href="#">产品质量保证</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">联系我们</a></dt>
                    <dd><a href="#">网站故障报告</a></dd>
                    <dd><a href="#">购物咨询</a></dd>
                    <dd><a href="#">投诉与建议</a></dd>
                </dl>
                <div class="b_tel_bg">
                    <a href="#" class="b_sh1">新浪微博</a>
                    <a href="#" class="b_sh2">腾讯微博</a>
                    <p>
                        服务热线：<br/>
                        <span>400-123-4567</span>
                    </p>
                </div>
                <div class="b_er">
                    <div class="b_er_c"><img src="images/er.gif" width="118" height="118"/></div>
                    <img src="images/ss.png"/>
                </div>
            </div>
            <div class="btmbg">
                <div class="btm">
                    备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright © 2015-2018 尤洪商城网 All Rights Reserved. 复制必究 ,
                    Technical Support: Dgg Group <br/>
                    <img src="images/b_1.gif" width="98" height="33"/><img src="images/b_2.gif" width="98" height="33"/><img
                        src="images/b_3.gif" width="98" height="33"/><img src="images/b_4.gif" width="98"
                                                                          height="33"/><img src="images/b_5.gif"
                                                                                            width="98" height="33"/><img
                        src="images/b_6.gif" width="98" height="33"/>
                </div>
            </div>
            <!--End Footer End -->
        </div>
    </div>
    <script>
        new Vue({
            el: "#box",
            data: {
                isFlag: true,
                loginFlag: "请登录",
                exitFlag: false,
                userName: "",
                userOrders: [],
                userID: '',
                s:'',
                pageNo:1,
                pageCount:0,
                pageSize:0,
                count:0,

            },
            methods: {
                md5Public: async function (objectStr) {
                    let randomNum = 0;
                    //接口拿随机数
                    await axios({
                        url: "http://localhost:8080/setRedisNum",
                        methods: "get"
                    }).then(res => {
                        // alert("随机数开始");
                        console.log("随机数:" + res.data);
                        randomNum = res.data;

                    })
                    //放到header里的参数 时间戳 随机数 加密的字符串
                    //时间戳
                    var dateStr = new Date();
                    dateStr = Date.now();

                    //把obj按照key值升序
                    let sortObject = function (obj) {
                        let sorter = function (a, b) {
                            return obj[a] - obj[b];
                        }
                        let keys = Object.keys(obj);
                        keys.sort(sorter);
                        let res = {};
                        keys.forEach(key => {
                            res[key] = obj[key];
                        });
                        return res;
                    }
                    //升序的对象
                    var sxStr = sortObject(objectStr);
                    //把升序的对象转成字符串
                    var jsonStr = "";
                    for (let obj in objectStr) {
                        jsonStr += obj + "=" + objectStr[obj] + "&";
                    }
                    //把最后一个&符号切割了
                    jsonStr = jsonStr.substr(0, jsonStr.length - 1);

                    //加密字符串
                    var str = MD5(jsonStr + randomNum);
                    console.log("jsonStr:" + jsonStr);
                    console.log("randomNum:" + randomNum);
                    // alert("str:"+str);
                    await axios({
                        url: "http://localhost:8080/returnInterfaceStr",
                        methods: "POST",
                        params: objectStr,
                        headers: {
                            "TimeStamp": dateStr,
                            "randomNum": randomNum,
                            "encryptionStr": str
                        }
                    }).then(res => {
                        console.log(res);
                        console.log("后端接受之:" + res.data);
                        if (res.data == true) {
                            return true;
                        } else {
                            return false;
                        }
                    })
                    return true;
                },
                exit: async function () {
                    let flag = await this.md5Public({"a1": 54, "a2": 55, "a3": 56});
                    if (flag == true) {
                        await axios({
                            url: "http://localhost:8080/delRedisByUserName?userName=" + this.userName,
                            methods: "GET"
                        }).then(res => {
                            console.log("退出的");
                            console.log(res);
                            if (res.data == true) {
                                let storage = window.localStorage;
                                storage.clear();
                                alert("退出成功!");
                                window.location.href = "./index.html";
                            }
                        })
                    }
                },
                showOrders: async function () {
                    var that = this;
                    /*alert(that.s);
                    alert(pageNo);
                    return;*/
                    let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
                    if( flag == true ){
                        await axios({
                            method: 'post',
                            url:'http://localhost:8080/getOrdersByUserId',
                            headers:{'content-type':'application/x-www-form-urlencoded'},
                            data:{
                                userId:that.userID,
                                serialNumber:that.s,
                                pageNo:that.pageNo,
                            }
                        }).then(function (response) {
                            console.log(response.data.data);
                            that.userOrders=response.data.data.list;
                            that.pageCount=response.data.data.pageCount;
                            that.count=response.data.data.count;
                            console.log(that.userOrders);
                        })
                    }
                },
                onePage: function() {
                    this.pageNo = 1;
                    this.showOrders(this.pageNo);
                },
                shangPage: function() {
                    var pageNo1 = this.pageNo - 1
                    if (pageNo1 > 0) {
                        this.showOrders(pageNo1);
                        this.pageNo = pageNo1;
                    } else {
                        alert("当前页面为第一页")
                    }
                },

                xiaPage: function() {
                    var pageNo1 = this.pageNo + 1
                    if (pageNo1 <= this.pageCount) {
                        this.showOrders(pageNo1);
                        this.pageNo = pageNo1;
                    } else {
                        alert("当前页面为最后一页");
                    }
                },

                showLast: function() {
                    this.showOrders(this.pageCount);
                    this.pageNo = this.pageCount;
                },
            },
            created() {
                this.showOrders();
                let storage = window.localStorage;
                let num = storage.getItem("type");
                if (num == 1) {
                    this.isFlag = true;
                    this.exitFlag = true;
                    this.loginFlag = storage.getItem("userName");
                    this.userName = storage.getItem("userName");

                } else if (num == undefined || num == null) {
                    alert("您没有登录,请先登录,即将为您跳转到登录页页面!");
                    window.location.href = "./login.html";
                    return;
                } else if (num == 0) {
                    this.isFlag = false;
                    this.exitFlag = true;
                    this.loginFlag = storage.getItem("userName");
                    this.userName = storage.getItem("userName");
                    this.userID = storage.getItem("id");
                }
            }
        })


</script>
</body>


<!--[if IE 6]>
<script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>
<![endif]-->
</html>
